/**
* 订单管理 交易订单
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    
    <!--列表-->
    <el-table size="small"
    :header-row-class-name="tableHeaderClassName"
    :data="listData" v-loading="loading" border
    element-loading-text="拼命加载中" style="width: 100%;margin-top:24px">

      <el-table-column  type="index" label="序号" width="120" show-overflow-tooltip>
      </el-table-column>

      <el-table-column  prop="name" label="预约名称" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="phone" label="预约手机号" width="120" show-overflow-tooltip>
      </el-table-column>

      
      <el-table-column  prop="createTime" label="提交时间" width="150">
        <template slot-scope="scope">
          <div>{{ transformDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      
     <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
         
          <el-button size="mini"   type="danger" @click="delFn(scope.row.id)">删除</el-button>
 
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:24px"></div>
    <!-- 分页组件 -->
    <el-pagination
        background
        :page-size="pageparm.pageSize"
        :current-page="pageparm.currentPage"
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="pageparm.total"
      >
      </el-pagination>
    <el-dialog :title="title" :visible.sync="editFormVisible" width="80%" @click='closeDialog("edit")'>
      <el-form label-width="120px" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input size="small" v-model="from.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>
      </el-form>

      <el-form label-width="120px" ref="editForm">

        <el-form-item label="简短内容" prop="briefContent">
          <el-input size="small" v-model="from.briefContent" auto-complete="off" placeholder="简短内容"></el-input>
        </el-form-item>




      </el-form>


      <el-form label-width="120px" ref="editForm">

        <el-form-item label="分类名称" prop="roleName">
          <quill-editor v-model="from.content" :options="editorOption" style="height: 200px;" ref="QuillEditor">
          </quill-editor>
        </el-form-item>



      </el-form>






      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="addNotice(0)">发送</el-button>
        <!-- <el-button size="small" type="primary" :loading="loading" class="title" @click="addNotice(1)">给所有人发送</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getUserList,setMemberStatus } from '../../api/userMG'
import Pagination from '../../components/Pagination'





import client from "@/utils/ossClient.js";
import VueQuillEditor from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import {selectSubmits,deleteSubmits} from '@/api/userMG'
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  ["blockquote", "code-block"],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }], // superscript/subscript
  [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image", "video"], // 对于图片上传这是重点
  ["clean"], // remove formatting button
];


export default {
  data() {
    return {
      uploadVisible: false,
      cursorIndex: 0,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: (value) => {
                if (value) {
                  // 在这里编写图片按钮点击操作
                  this.uploadVisible = true;
                  this.cursorIndex =
                    this.$refs.QuillEditor.quill.getSelection().index;
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },


      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '预览',
      statusType: [
        { key: '请选择', value: 0 },
        { key: '正常', value: 1 },
        { key: '冻结', value: 2 }
      ],

      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },

      keyword: "",


      from: {
        title: "",
        briefContent: "",
        content: "",
        userId: "",
        sendType: 0,

      },

      // 导出Excel 字段
      fieldsList: {
        "用户ID": "id",    //常规字段
        "用户昵称": "name", //支持嵌套属性
        "手机号": "mobile",
        "剩余积分": "integral",
        "注册门店": "station_name",
        "创建时间": "createTime"

      },



    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(1)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {

    tableHeaderClassName({row, rowIndex}){
        return rowIndex === 0 ? 'table-header' : '';   
     
      },
    setMemberStatus(status, id) {
      this.loading = true;
      var parameter = {
        status: status,
        id: id,
      };
      setMemberStatus(parameter).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.getdata(1)
          return;
        }
        this.$message({
          type: "info",
          message: res.msg,
        });
      });
    },

    currentChange(e) {
      console.log("e=========", e);
      this.pageparm.currentPage = e;
      this.getdata(this.pageparm.currentPage)
    },
    //自定义上传方法..
    mainImgUpload(file) {
      var self = this;
      //判断扩展名
      const tmpcnt = file.file.name.lastIndexOf(".");
      const exname = file.file.name.substring(tmpcnt + 1);
      const names = ["jpg", "jpeg", "webp", "png", "bmp"];
      if (names.indexOf(exname) < 0) {
        this.$message.error("不支持的格式!");
        return;
      }
      const fileName = file.file.uid + "." + exname;
      client
        .put(fileName, file.file)
        .then((res) => {
          if (res.url) {
            self.getUrl(res.url);
          } else {
            this.$message.error("文件上传失败");
          }
        })
        .catch((err) => { });
    },
    getUrl(url) {
      this.uploadVisible = false;
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill;
      // 如果上传成功
      if (url) {
        // 插入图片，res为服务器返回的图片链接地址

        quill.insertEmbed(this.cursorIndex, "image", url);
        // 调整光标到最后
        quill.setSelection(this.cursorIndex + 1);
      } else {
        // 提示上传失败信息
      }
    },



    // 获取数据方法
    getdata(page) {
      this.loading = true;
      selectSubmits({
        page:page,
        size:this.pageparm.pageSize,
      }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.listData = res.data.data;
           this.pageparm.total=res.data.count
          return;
        }
        this.$message({
          type: "info",
          message: res.msg,
        });
      });
    },
    delFn(id){
      this.$confirm("确定要删除吗?", "信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                  deleteSubmits({ id })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: "success",
                                    message: "已删除！",
                                });
                                this.getdata(1);
                            } else {
                                this.$message({
                                    type: "info",
                                    message: res.msg,
                                });
                            }
                        })
                        .catch((err) => {
                            this.loading = false;
                            this.$message.error("删除失败，请稍后再试！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.page = parm.currentPage
      this.pageparm.pageSize = parm.pageSize
      this.getdata(parm.currentPage)
    },
    // 搜索事件
    search() {
      this.getdata(1)
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      this.editForm = row
      this.from.userId = row.id;
    },

    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      this.editFormVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
 .table-header   {
  background: red !important;
}
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;

}
</style>